<template>
    <div>
        <el-card>
            <!-- 头部功能区 -->
            <el-row>
                <el-form inline
                         :model="formInline">
                    <!-- 新增搜索 -->
                    <el-form-item>
                        <el-input size="mini"
                                  placeholder="请输入名称"
                                  suffix-icon="el-icon-search"
                                  style="width: 250px">
                        </el-input>
                    </el-form-item>
                </el-form>
            </el-row>

            <!-- 新增弹框 -->
            <el-row>
                <el-dialog title="新增"
                           :visible.sync="addFormVisible">
                    <el-form ref="addForm"
                             :model="addForm"
                             :rules="rules">
                        <el-form-item label="模板名称"
                                      prop="name"
                                      label-width="110px">
                            <el-input v-model="addForm.name"
                                      autocomplete="off"
                                      placeholder="请输入服务模版名称"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer"
                         class="dialog-footer">
                        <el-button @click="addFormVisible = false">取 消</el-button>
                        <el-button type="primary"
                                   @click="addServiceTemplate('addForm')">确 定</el-button>
                    </div>
                </el-dialog>
            </el-row>

            <!-- 编辑弹框 -->
            <el-dialog title="编辑"
                       :visible.sync="editFormVisible">
                <el-form ref="editForm"
                         :model="editForm"
                         :rules="rules">
                    <el-form-item label="名称"
                                  prop="serviceTemplateName"
                                  label-width="100px">
                        <el-input v-model="editForm.serviceTemplateName"
                                  autocomplete="off"
                                  placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer"
                     class="dialog-footer">
                    <el-button @click="editFormVisible = false">取 消</el-button>
                    <el-button type="primary"
                               @click="editServiceTemplate('editForm')">确定</el-button>
                </div>
            </el-dialog>

            <!-- 列表 -->
            <el-row>
                <el-table :data="tableData"
                          style="width: 100%"
                          height="calc(100vh - 250px)">
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="name"
                                     label="名称"
                                     sortable>

                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="monitoringitems"
                                     label="监控项"
                                     sortable>
                        <template slot-scope="scope">
                            <a class="size_color"
                               @click="monitoringitems()">{{scope.row.monitoringitems}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="trigger"
                                     label="触发器">
                        <template slot-scope="scope">
                            <router-link :to="{ path: 'Trigger' }"
                                         class="size_color">{{scope.row.trigger}}</router-link>
                        </template>
                    </el-table-column>
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="graphical"
                                     label="图形"
                                     sortable>
                        <template slot-scope="scope">
                            <router-link :to="{ path: 'Graphical' }"
                                         class="size_color">{{scope.row.graphical}}</router-link>

                        </template>
                    </el-table-column>
                    <!-- <el-table-column show-overflow-tooltip="ture"
                                     prop="Autodiscover"
                                     label="自动发现">
                        <template slot-scope="scope">
                            <router-link :to="{ path: 'Autodiscover' }"
                                         class="size_color">{{scope.row.Autodiscover}}</router-link>
                        </template>
                    </el-table-column> -->
                    <el-table-column show-overflow-tooltip="ture"
                                     prop="mark"
                                     label="标记">
                    </el-table-column>
                </el-table>
                <pagination v-show="total > 0"
                            :total="total"
                            :page.sync="query.pageNum"
                            :limit.sync="query.pageSize"
                            :select-data-len="multipleSelection.length"
                            @pagination="getListData" />
            </el-row>
        </el-card>
    </div>
</template>

<script>
    import {
        serviceTemplateList_Api, //服务模版列表查询
        addServiceTemplate_Api, //服务模版新增
        editServiceTemplate_Api, //服务模版编辑
        delServiceTemplate_Api, //服务模版删除
        serviceCategoryList_Api, //服务分类列表查询
        getListByServiceId_Api, //根据父级列id查询子集列表
    } from "@/api/configuration/business";
    import {
        clearObj, //清空表单的值
    } from "@/utils/index.js";
    import {
        getCurrent_YMDHMS_Time, //获取当前年月日时分秒
    } from "@/utils/common.js";
    export default {
        data () {
            return {
                //编辑表单
                editForm: {
                    serviceTemplateId: "", //模板ID
                    serviceTemplateName: "", //模板名称
                    serviceCategoryId: "", //服务分类
                    serviceCategoryName: "", //服务分类
                },
                //新增弹框隐藏显示
                addFormVisible: false,
                editFormVisible: false, //控制编辑弹框隐藏显示
                //  新增表单
                addForm: {
                    serviceTemplateName: "", //模板名称
                    serviceCategoryId: "", //服务分类
                    serviceCategoryName: "", //服务分类名称
                },
                // 数据条数
                total: 0,
                //分页数据
                query: {
                    pageNum: 1,
                    pageSize: 10,
                },
                multipleSelection: [],
                // 查询表单
                formInline: {
                    parentId: "", //一级
                    categoryId: "", //二级
                    templateName: "", //模板名称
                },
                //  表格数据
                tableData: [
                    {
                        name: 'AIX by Zabbix agent',
                        monitoringitems: '监控项 43',
                        trigger: '触发器10',
                        graphical: '图形10',
                        Autodiscover: '自动发现2',
                        mark: 'target: aix:class: os'
                    },
                ],
                //表单验证规则
                rules: {
                    serviceTemplateName: [
                        { required: true, message: "请输入模版名称", trigger: "blur" },
                    ],
                    serviceCategoryId: [
                        { required: true, message: "请选择服务分类", trigger: "blur" },
                    ],
                },
                //服务数据分类
                serviceCategoryData: [],
                selectVal1: "", //一级下拉框
                selectVal2: "", //二级下拉框
            };
        },
        methods: {
            //获取列表数据
            getListData (searchVal) {
                let query = { ...this.query };
                //测试
                if (searchVal) query = { ...query, ...this.formInline };
                serviceTemplateList_Api(query).then((res) => {
                    // this.tableData = 
                    this.total = res.total;
                });
            },
            //获取服务分类列表数据
            getServiceCategoryData () {
                serviceCategoryList_Api().then((res) => {
                    this.serviceCategoryData = res.rows;
                });
            },
            //删除服务模版数据
            deleteData (id) {
                delServiceTemplate_Api(id)
                    .then((res) => {
                        this.getListData(true); //重新拿数据
                        this.$message({
                            message: "删除成功",
                            type: "success",
                        });
                    })
                    .catch((error) => {
                        this.$message({
                            message: "删除失败",
                            type: "error",
                        });
                    });
            },
            //服务模版添加
            addServiceTemplate (formName) {
                //验证表单是否输入正确
                this.addForm.addTime = getCurrent_YMDHMS_Time(); //新增时间
                this.addForm.userId = this.$store.state.user.userId; //添加人
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //正确
                        addServiceTemplate_Api(this.addForm)
                            .then((res) => {
                                this.getListData(); //重新拿数据
                                this.addFormVisible = false; //隐藏添加模版弹框
                                this.$message.success(res.msg);
                            })
                            .catch((error) => { });
                    } else {
                        return false;
                    }
                });
            },
            //显示新增弹框
            showAddForm () {
                this.addFormVisible = true;
                //清空
                this.addForm = clearObj(this.addForm);
                this.selectVal1 = "";
                this.selectVal2 = "";
            },
            //服务模版编辑
            editServiceTemplate (formName) {
                this.editForm.updateTime = getCurrent_YMDHMS_Time(); //修改时间
                this.editForm.userId = this.$store.state.user.userId; //修改人
                // this.categoryName =
                //验证表单是否输入正确
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        //正确
                        editServiceTemplate_Api(this.editForm)
                            .then((res) => {
                                this.getListData(); //重新拿数据
                                this.editFormVisible = false; //隐藏添加模版弹框
                                this.$message.success(res.msg);
                            })
                            .catch((error) => {
                                this.$message({
                                    message: "编辑失败",
                                    type: "error",
                                });
                            });
                    } else {
                        return false;
                    }
                });
            },
            //显示编辑弹框
            handleEdit (row) {
                this.editFormVisible = true;
                this.editForm = { ...row };
                this.selectVal2 = this.editForm.serviceCategoryId;
                this.serviceCategoryData.forEach((item) => {
                    if (item.categoryId == this.editForm.serviceCategoryId) {
                        this.selectVal1 = item.parentId;
                    }
                });
            },
            //搜索
            handleQuery (boo = false) {
                if (boo) {
                    this.formInline.categoryId = "";
                }
                if (
                    this.formInline.parentId ||
                    this.formInline.categoryId ||
                    this.formInline.templateName
                ) {
                    this.getListData(true);
                } else if (this.formInline.templateName == "") {
                    this.getListData(true);
                }
            },
            //选择服务分类二级
            changeSelect (val) {
                this.addForm.serviceCategoryId = val;
                this.editForm.serviceCategoryId = val;
                const s1 = this.serviceCategoryData.find(
                    (item) => item.categoryId == this.selectVal1
                );
                const s2 = this.serviceCategoryData.find(
                    (item) => item.categoryId == this.selectVal2
                );
                console.log(s1, s2);
                //拼接serviceCategoryName服务分类名
                this.addForm.serviceCategoryName =
                    s1.categoryName + " / " + s2.categoryName;
                //拼接serviceCategoryName服务分类名
                this.editForm.serviceCategoryName =
                    s1.categoryName + " / " + s2.categoryName;
            },
            //表格id样式
            cellStyle ({ column, columnIndex }) {
                // 状态列字体颜色
                if (column.ID !== "" && columnIndex === 0) {
                    return "color: #46a6ff;cursor:pointer;";
                }
            },
            //监控项跳转
            monitoringitems () {
                console.log(123)
                this.$router.push({
                    path: "List",
                });
            },
            //触发器跳转页面
            trigger () {
                this.$router.push({
                    path: "List",
                });
            },
            //查询
            onSubmit () {
                console.log(this.formInline);
            },

            handleSelectionChange (val) {
                this.multipleSelection = val;
            },
        },
        created () {
            //获取表格数据
            this.getListData();
            //获取服务分类列表数据
            this.getServiceCategoryData();
        },
        computed: {
            //一级分类下拉数据
            oneCategory () {
                return this.serviceCategoryData.filter((item) => !item.parentId);
            },
            //二级分类下拉数据
            twoCategory () {
                //没有选择一级，提示先选择一级
                if (!this.formInline.parentId) {
                    return [{ categoryName: "请选择一级分类", categoryId: "1" }];
                } else {
                    return this.serviceCategoryData.filter(
                        (item) => item.parentId == this.formInline.parentId
                    );
                }
            },
            //二级分类下拉数据
            addTwoCategory () {
                //没有选择一级，提示先选择一级
                if (!this.selectVal1) {
                    return [{ categoryName: "请选择一级分类", categoryId: "1" }];
                } else {
                    return this.serviceCategoryData.filter(
                        (item) => item.parentId == this.selectVal1
                    );
                }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .size_color {
        color: #1890ff;
        cursor: pointer;
    }
</style>
